<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../static/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../static/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/native.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title"> 个人中心 </h1>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>
<div class="mui-content">
    <div id="tabbar-with-map" class="mui-control-content mui-active">
        <div class="wall">
           <div class='avatar'>
              
           </div>
           <h4> Abdulahad </h4>
        </div>     
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="order.html" class="mui-navigate-right">
                    我的订单
                </a>
            </li>
            <li class="mui-table-view-cell">
               <ul class="orders">
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
               </ul>
            </li>
            <li class="mui-table-view-cell">
                <a href="profile.html" class="mui-navigate-right">
                    我的信息
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="collect.html" class="mui-navigate-right">
                    我的收藏
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="address.html" class="mui-navigate-right">
                    我的地址
                </a>
            </li>
        </ul>
        <ul class="mui-table-view" style="margin-top: 25px;">
            <li class="mui-table-view-cell">
                <a href="telphone.html" class="mui-navigate-right">
                    修改手机号
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="password.html" class="mui-navigate-right">
                    修改密码
                </a>
            </li>
        </ul>   
        <ul class="mui-table-view" style="margin-top: 25px;">
            <li class="mui-table-view-cell">
                <a href="about.html" class="mui-navigate-right">
                    关于我们
                </a>
            </li>
        </ul>
        <ul class="mui-table-view" style="margin-top: 25px;margin-bottom:30px;">
            <li class="mui-table-view-cell">
                <a style="text-align: center;color: #FF3B30;">
                    退出登录
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="../static/js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
</script>
</html>